<template>
	<view @click="navigate('/page_market/work/my_detail?id='+detail.id)" class="work-item-send-com">
		<view class="name-block">
			<view class="valuation">{{valuationText.name}}</view>
			<view class="name">{{detail.name}}</view>
			<view class="process_status">{{detail.processStatusText}}</view>
		</view>
		<view class="time">开工日期：{{detail.startTime}}</view>
		<view class="time">完工日期：{{detail.endTime||'--'}}</view>
		<view class="price"><text class="number">{{detail.price}}</text>{{valuationText.unit}}</view>
	</view>
</template>

<script>
	export default {
		name: 'WorkItemSend',
		data() {
			return {}
		},
		props: {
			detail: {
				type: Object,
				default: () => {
					return {
						valuation: 1,
						name: '',
						startTime: '',
						endTime: '',
						price: '',
						price_text: ''
					}
				}
			}
		},
		computed: {
			valuationText() {
				let obj = {}
				switch (this.detail.valuation) {
					case 1:
						obj = {
							name: '短期工',
							unit: '元/天'
						};
						break;
					case 2:
						obj = {
							name: '小时工',
							unit: '元/时'
						};
						break;
					case 3:
						obj = {
							name: '计件工',
							unit: '元/100件'
						};
						break;
					default:
						obj = {
							name: '短期工',
							unit: '元/天'
						};
				}
				return obj
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-item-send-com {
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 30rpx;
		width: 100%;

		.name-block {
			width: 100%;
			display: flex;
			align-items: center;

			.valuation {
				width: 100rpx;
				border-radius: 4px;
				color: $orange-color;
				background: #E1E8F9;
				font-size: 24rpx;
				padding: 2px 7px;
				margin-right: 20rpx;
				text-align: center;
			}

			.name {
				width: calc(100% - 220rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.process_status {
				color: $orange-color;
			}
		}

		.time {
			margin-top: 30rpx;
			color: #757575;
			font-size: 28rpx;
		}

		.price {
			margin-top: 30rpx;
			color: $orange-color;
			font-size: 24rpx;

			.number {
				font-size: 32rpx;
			}
		}
	}
</style>